.Home {
  padding: 10px 20px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .top-content {
    display: flex;
    align-items: center;
    gap: 20px;
    .type-box,
    .sort-box {
      display: flex;
      gap: 7px;
      align-items: center;
      .name {
        font-size: 14px;
        color: #cdcccc;
      }
    }

    .right-buttons {
      margin-left: auto;
      display: flex;
      gap: 10px;
      align-items: center;
      .btn {
        width: 35px;
        height: 35px;
        background-color: transparent;
        border: none;
        cursor: pointer;
        transition: 0.3s;
        display: flex;
        border-radius: 999px;
        &:hover {
          background-color: var(--hover-color);
          svg {
            transition: 0.3s;
            transform: rotate(90deg);
          }
        }
        &:active {
          transform: scale(0.9);
          svg {
            transform: rotate(90deg);
          }
        }
        svg {
          margin: auto;
          width: 25px;
          height: 25px;
        }
      }
    }
  }

  .list-content {
    flex: 1;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    position: relative;
    .list {
      flex: 1;
      overflow-y: auto;
      padding-top: 10px;
      padding-right: 20px;
      // background-color: rgba(38, 132, 99, 0.196);
      .list-inner {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 20px;

        .item {
          aspect-ratio: 0.7;
          // background-color: black;
          display: flex;
          flex-direction: column;
          cursor: pointer;
          animation: gameItemShowAnim 0.7s ease-in-out forwards;
          animation-delay: var(--delay);
          opacity: 0;
          .thumb-box {
            width: 100%;
            aspect-ratio: 0.8;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
            .thumb {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: 0.3s;
            }
          }
          .name {
            flex: 1;
            display: flex;
            align-items: center;
            transition: 0.3s;
          }
          &:hover {
            transform: translate(0, -3px) !important;
            .thumb-box {
              .thumb {
                filter: brightness(0.9);
                transform: scale(1.06);
              }
            }
            .name {
              color: var(--primary-color);
            }
          }
          @keyframes gameItemShowAnim {
            0% {
              transform: scale(0.8);
              opacity: 0;
            }
            100% {
              transform: scale(1);
              opacity: 1;
            }
          }
        }
      }
    }
    .pagination {
      height: 50px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .empty {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      .empty-icon {
        width: 120px;
        height: 120px;
        fill: #cdcccc8a;
      }
      .empty-text {
        font-size: 14px;
        color: #cdccccbf;
        margin-top: 10px;
      }
      .add-btn {
        display: inline;
        cursor: pointer;
        transition: 0.3s;
        &:hover {
          color: var(--primary-color);
          text-decoration: underline;
        }
      }
    }
  }
}
